<template>
	<view class="header">
		<view class="header-bg">
			<!-- <img :src="circle.avatar" alt="" /> -->
			<image :src="circleDetail.circle_avatar" mode="aspectFill"></image>
		</view>
		<view class="header-content">
			<view class="header-left">
				<image class="circle-avatar" :src="circleDetail.circle_avatar" mode="aspectFill"></image>
			</view>
			<view class="header-right">
				<view class="circle-title">
					<view class="circle-name">{{circleDetail.circle_name}}</view>
					<view class="circle-follow" >
						<button
							v-if="!circleDetail.is_follower"
							size="mini" 
							type="primary" 
							class="btn"
							hover-class="none" 
							@click.stop="clickFollow(circleDetail)">关注</button>
					<button
							v-else
							size="mini" 
							type="primary" 
							class="btn"
							hover-class="none" 
							@click.stop="clickFollow(circleDetail)">已关注</button>
					</view>
				</view>
				<view class="circle-infor">
					<view class="infor-num">
						{{formatNumber(circleDetail.views_count)}}浏览
					</view>
					<view class="infor-num">
						{{formatNumber(circleDetail.posts_count)}}帖子
					</view>
					<view class="infor-num">
						{{formatNumber(circleDetail.fans_count)}}粉丝
					</view>
				</view>
				<up-text 
					:lines="2"  
					class="infor-num"
					:size="12"
					color="white"
					:text="circleDetail.circle_description"
					@click="handleDetail"></up-text>
					
			</view>
		</view>
		
	</view>
	<view class="tabs">
		<up-tabs
		    :list="list"
		    lineWidth="30"
		    lineColor="#d81e06"
			:current="type"
		    :activeStyle="{
		        color: '#330c06',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }"
		    :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }"
		    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			@change="changeType"
		>
		</up-tabs>
	</view>
	<view v-if="type === 0">
		<view>
		   <up-notice-bar :text="text1" mode="closable" url="/pages/postDetail/postDetail"></up-notice-bar>
		 </view>
		 <template v-for="(post,index) in circleDetail.Posts" :key="index">
			 <Post :isEllipsis="true" :post="post"/>
		 </template>
	</view>
	<view v-if="type === 1" class="circle-detail">
		<view>{{circleDetail.circle_name}}</view>
		<view class="circle-description">{{circleDetail.circle_description}}</view>
		<image :src="circleDetail.circle_avatar" mode="aspectFill"></image>
	</view>
	<view v-if="type === 2">
		公告111111111111
	</view>
</template>

<script lang="ts" setup name="">
	import Post from '../../components/post/post.vue'
	import formatNumber from '../../common/formatNumber.js'
	import {getCircleDetail} from '../../apis/circle'
	import { onMounted, reactive,ref } from 'vue'
	let circleDetail = ref({})
	const list = reactive([
	    { name: '帖子' },  
	    { name: '详情' },  
	    { name: '公告通知' },  
	]);  
	const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
		
	let type = ref(0)
		
	onMounted(()=>{
		init();
	})
	
	async function init(){
		let pages = getCurrentPages();
		let currentPage = pages[pages.length - 1];  
		let options = currentPage.options;
		console.log(options);
		const res = await getCircleDetail(options)
		console.log(res.circleDetail);
		circleDetail.value = res.circleDetail;
		console.log(circleDetail.value.Posts);
	}
	function changeType(tabs){
		console.log(tabs);
		type.value = tabs.index;	
	}
	function handleDetail(){
		type.value = 1;
	}
		
	function clickFollow(val){
		console.log('关注');
		console.log(val);
	}
</script>

<style scoped lang="scss">
	
	.header{
		overflow: hidden;
		.header-bg{
			position: relative;
			filter: blur(80upx);
			
		}
		.header-bg image{
			width: 100%;
			object-fit: cover;
			max-height: 300upx;
		}
			
		.header-content{
			position: absolute;
			top: 20upx;
			width: 100%;
			box-sizing: border-box;
			padding: 50upx 30upx;
			display: flex;
			align-items: center;
			color: white;
			.header-left{	
				width: 30%;
				.circle-avatar{
					width: 180upx;
					height: 180upx;
					margin-right: 20upx;
				}
			}
			
			.header-right{	
				width: 70%;
				.circle-title{
					display: flex;
					justify-content: space-between;
					margin-bottom: 40upx;
					.circle-name{
						font-weight: bold;
						font-size: 40upx;
					}
					.circle-follow{
						.btn{
							color:white;
							background-color:$primary;
							border-radius: 50upx;				
						}
					}
				}
				.circle-infor{
					display: flex;
					margin-right: 20upx;
					margin-bottom: 10upx;
					.infor-num{
						margin-right: 10upx;
						font-size: 25upx;
					}
					
				}
			}
		}
		
}
	.tabs{
		background-color: white;
		padding-bottom: 20upx;
	}
	.circle-detail{
		padding: 0 30upx;
		.circle-description{
			font-size: 25upx;
			margin: 20upx 0;
		}
	}
</style>